<!--
* @description:主菜单
* @fileName: ManagementBackgroundHomePage
* @author:孟帅龙
* @date:2021-1-14
* @后台人员:孟帅龙
-->
<template>
  <div>
    <el-container>
      <el-header>
        <el-row :span="1">
          <el-col :span="3">
            <img :src="xianzhi" width="320px" height="60px" />
          </el-col>
          <el-col :span="18">
            <span class="zti"><b>天 使 物 流</b></span>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
            <MenuTree :showData="this.showData"></MenuTree>
          </el-menu>
        </el-aside>
        <el-main>
         
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MenuTree from "../../components/MenuTree.vue";
import xzImg from "@/assets/cheliang.png";

export default {
  name: "ManagementBackgroundHomePage",
  components: { MenuTree },
  data() {
    return {
      showData: [],
      xianzhi: xzImg,
    };
  },
  methods: {
    tiaozhuan(Url) {
      this.$router.push(Url);
    },
    loadMenu() {
      this.$axios
        .get("https://localhost:44399/api/app/menu/menus")
        .then((res) => {
          this.showData = res.data;
        });
    },
  },
  created() {
    this.loadMenu();
    this.$router.push('/ThePersonnelKanBan');
  },
};
</script>

<style>
.divheaderall{
  width: 100%;
  height: 90%;
  float: left;
}
.divheaderfirst{
  float: left;
  width: 40%;
  height: 100%;
}
.divheadertwo{
  float: left;
  font-weight: bold;
   font-size: 25px;
}
.el-header,
.el-footer {
  background-color: #cddef1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;

}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.zti {
  font-size: 25px;
  color: rgb(112, 115, 116);
}
.backgrount{
  width: 100%;
  height: 100%;
}
</style>